<template>
	<el-main>
		<el-row :gutter="15">
			<el-col :lg="6">
				<el-card shadow="never" header="处理逻辑说明">
					<el-timeline>
						<el-timeline-item timestamp="两者数据并无顺序要求,只是获取表单值时需要自行设置loading"
						>1.远程获取表单配置参数和表单的值</el-timeline-item
						>
						<el-timeline-item timestamp="构建form对象, 循环渲染对应组件, 获取远程选项数据. 完成前组件将由骨架代替"
						>2.根据配置构建表单组件</el-timeline-item
						>
						<el-timeline-item timestamp="合并form对象和表单值">3.给表单赋值</el-timeline-item>
					</el-timeline>
					<el-alert
						title="当前版本为预览版本,并未在正式项目中实施,请谨慎使用. 更多配置以及图形化编辑器正在路上."
						type="warning"
						show-icon
					></el-alert>
				</el-card>
				<el-card shadow="never" header="双向绑定">
					<el-button type="primary" @click="setName">改变输入框的值</el-button>
					<el-button type="primary" @click="setConfig">改变指定栅格配置</el-button>
				</el-card>
			</el-col>
			<el-col :lg="12">
				<el-card shadow="never" header="动态表单渲染器">
					<sc-form ref="formRef" v-model="formData" :config="config" :loading="loading"  @submit="save">
						<el-button type="primary" @click="save">保 存</el-button>
						<el-button @click="reset">重 置</el-button>
					</sc-form>
				</el-card>
			</el-col>
			<el-col :lg="6">
				<el-card shadow="never" header="表单输出">
					<pre>{{ formData }}</pre>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const loading = ref(false)
const config = ref({})
const formRef = ref(null)
const formData = ref({})

const mockConfig = {
	labelWidth: '130px',
	labelPosition: 'right',
	span: 24,
	size: 'default',
	emptySize: 0,
	emptySpan: 18,
	mode: 'form',
	formItems: [
		{
			"label": "ElementPlus",
			"component": "title"
		},
		{
			"label": "单选",
			"name": "radio",
			"value": "1",
			"component": "radio",
			"options": {
				"items": [
					{
						"label": "选项1",
						"value": "1"
					},
					{
						"label": "选项2",
						"value": "2"
					}
				]
			},
			"hideHandle": "$.required==true"
		},
		{
			"label": "输入框",
			"name": "name",
			"value": "",
			"component": "input",
			"options": {
				"placeholder": "Activity name"
			},
			"rules": [
				{
					"required": true,
					"message": "请输入活动名称",
					"trigger": "blur"
				}
			]
		},
		{
			"label": "日期/时间",
			"name": "date",
			"value": "",
			"component": "date",
			"options": {
				"type": "datetime",
				"valueFormat": "YYYY-MM-DD HH:mm:ss"
			},
			"rules": [
				{
					"required": true,
					"message": "Please input Data",
					"trigger": "change"
				}
			]
		},
		{
			"label": "数值",
			"name": "number",
			"span": 8,
			"value": 0,
			"component": "number"
		}
	]

}

const mockForm = {
	radio: '1',
	name: '',
	date: '',
	number: 0
}

onMounted(() => {
	// Simulate async data loading
	loading.value = true

	setTimeout(() => {
		config.value = mockConfig
		// Initialize formData with default values from config if needed
		formData.value = { ...mockForm }
		loading.value = false
	}, 500)
})

const setName = () => {
	formData.value.name = 'New Title'
}

const setConfig = () => {
	config.value.formItems[2].span = config.value.formItems[2].span === 24 ? 12 : 24
	config.value.formItems[3].span = config.value.formItems[3].span === 24 ? 12 : 24
}

const save = () => {
	formRef.value?.validate((valid) => {
		if (valid) {
			console.log(formData.value)
			alert('submit!')
		} else {
			// Handle validation errors
		}
	})
}

const reset = () => {
	formRef.value?.resetFields()
}
</script>

<style scoped>
/* Add your styles here */
</style>
